<template>
  <div class="register-body">
    <div class="container">
      <div class="demo">
        <div class="container">
          <div class="row">
            <div class="col-md-4 col-sm-6" @click="toRegisterAudit">
              <div class="box">
                <img src="../../../assets/img/learnInDongyang/appManage/appAudit/1@2x.png">
                <div class="box-title">
                  <span>注册审核</span>
                  <div class="littleIcon"> <img src="../../../assets/img/learnInDongyang/appManage/appAudit/4@2x.png"></div>
                </div>
                <div class="box-content">
                  <h3 class="title">注册审核</h3>
                  <span class="post">Registration Audit</span>
                </div>
                <ul class="icon">
                  <li><a href="#"><i class="fa fa-search"></i></a></li>
                  <li><a href="#"><i class="fa fa-link"></i></a></li>
                </ul>
              </div>
            </div>
            <div class="col-md-4 col-sm-6" @click="toReleaseAudit">
              <div class="box">
                <img src="../../../assets/img/learnInDongyang/appManage/appAudit/2@2x.png">
                <div class="box-title">
                  <span>上架审核</span>
                  <div class="littleIcon"> <img src="../../../assets/img/learnInDongyang/appManage/appAudit/4@2x.png"></div>
                </div>
                <div class="box-content">
                  <h3 class="title">上架审核</h3>
                  <span class="post">toPutaway Audit</span>
                </div>
                <ul class="icon">
                  <li><a href="#"><i class="fa fa-search"></i></a></li>
                  <li><a href="#"><i class="fa fa-link"></i></a></li>
                </ul>
              </div>
            </div>
            <div class="col-md-4 col-sm-6" @click="toPutawayAudit">
              <div class="box">
                <img src="../../../assets/img/learnInDongyang/appManage/appAudit/3@2x.png">
                <div class="box-title">
                  <span>发布审核</span>
                  <div class="littleIcon"> <img src="../../../assets/img/learnInDongyang/appManage/appAudit/4@2x.png"></div>
                </div>
                <div class="box-content">
                  <h3 class="title">发布审核</h3>
                  <span class="post">Issued Audit</span>
                </div>
                <ul class="icon">
                  <li><a href="#"><i class="fa fa-search"></i></a></li>
                  <li><a href="#"><i class="fa fa-link"></i></a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

</template>
<script lang="ts" setup name="modelVue3">
//------------------接收传入参数(组件)-------------------
let router = useRouter()

//------------------定义调用方法-------------------------
const toRegisterAudit = () => {
  router.push('/appManage/registerAudit')
}

const toReleaseAudit = () => {
  router.push('/appManage/onShelvesAudit')
}

const toPutawayAudit = () => {
  router.push('/appManage/releaseAudit')
}
//------------------初始化------------------------------
onMounted(() => { })
//------------设置给父组件调用的数据/方法(组件)-----------
</script>
<style lang="scss" scoped>
.container {
	/* 弹性布局 允许换行 水平居中 */
	height: 82vh;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
}

.register-body {
	height: calc(100vh - 114px);
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: url(../../../assets/img/learnInDongyang/appManage/appAudit/bg@2x.png);
	background-size: 100% 100%;
	background-attachment: fixed;
	border-radius: 20px;
}
.body-container {
	position: relative;
	z-index: 1;
	background-color: #fff;
	border-radius: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 700px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.demo {
	padding: 50px 0;
}
.row {
	display: flex;
	justify-content: center;
}
.box {
	border-radius: 20px;
	font-family: 'Ubuntu', sans-serif;
	overflow: hidden;
	position: relative;
	margin: 50px;
    cursor: pointer;
}
.box-title {
	position: absolute;
	top: 60px;
	left: 60px;
	padding-bottom: 20px;
	border-bottom: 1px solid #C0DDFE;
	display: flex;
	justify-content: space-around;
}
.box-title span {
	font-size: 24px;
	color: #fff;
}
.littleIcon {
	margin-left: 40px;
	width: 30px;
	margin-top: 10px;
}
.box:before {
	content: '';
	background: #2E6FFF;
	width: 100%;
	height: 85%;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	transition: all 0.4s ease;
}
.box:hover:before {
	height: 70%;
	border-radius: 0 0 250px 250px;
	box-shadow: 0 0 20px #000;
	opacity: 0.9;
}
.box img {
	width: 100%;
	height: auto;
	transition: all 0.45s;
}
.box:hover img {
	opacity: 0.3;
}
.box .box-content {
	color: #fff;
	text-align: center;
	width: 100%;
	padding: 0 30px;
	opacity: 0;
	transform: translateX(-50%);
	position: absolute;
	top: 25%;
	left: 50%;
	z-index: 1;
	transition: all 0.4s ease;
}
.box:hover .box-content {
	opacity: 1;
}
.box .title {
	font-size: 23px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin: 0 0 2px;
  color: #ffffff;
}
.box .post {
	font-size: 16px;
	text-transform: capitalize;
}

@media only screen and (max-width: 990px) {
	.box {
		margin: 0 0 30px;
	}
}
</style>
